<template>
  <div class="treeData">
    <h3>多层级数组遍历</h3>
    {{ treeData }}
    <el-form
      v-if="formKey"
      :model="form"
      :rules="rules"
      ref="form"
      label-position="top"
    >
      <tree-child
        :data="treeData"
        :form="form.obj"
        :index="1"
        :custom-prop="'obj'"
      />
      <el-button type="primary" @click="save">提交</el-button>
    </el-form>
    <el-table :data="tableData">
      <el-table-column
        v-for="item in prop_list"
        :key="item.id"
        :label="item.name"
        :prop="item.custom_prop"
      />
    </el-table>
    <el-tree
      ref="treeRef"
      :data="treeData"
      show-checkbox
      default-expand-all
      node-key="name"
      :props="{
        children: 'children',
        label: 'name',
      }"
      @check-change="checkChange"
    >
    </el-tree>
  </div>
</template>
<script>
import treeChild from './tree-child'

export default {
  name: 'TreeData',
  components: {
    treeChild,
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: 'one',
          children: [
            {
              id: 11,
              name: 'one1',
              children: [
                {
                  id: 111,
                  name: 'one11',
                },
                {
                  id: 112,
                  name: 'one12',
                  isRequired: true,
                  role: '1',
                },
              ],
            },
            {
              id: 12,
              name: 'one2',
              children: [
                {
                  id: 121,
                  name: 'one21',
                  isRequired: true,
                  role: '1',
                },
                {
                  id: 122,
                  name: 'one22',
                  isRequired: true,
                  role: '2',
                },
                {
                  id: 123,
                  name: 'one23',
                  isRequired: true,
                  role: '2',
                },
                {
                  id: 124,
                  name: 'one24',
                  isRequired: true,
                  role: '1',
                },
              ],
            },
            {
              id: 13,
              name: 'one3',
              children: [
                {
                  id: 131,
                  name: 'one31',
                },
              ],
            },
          ],
        },
        {
          id: 2,
          name: 'two',
          children: [
            {
              id: 21,
              name: 'two1',
              children: [
                {
                  id: 211,
                  name: 'two211',
                  children: [
                    {
                      id: 2111,
                      name: 'two2111',
                      isRequired: true,
                      role: '2',
                    },
                  ],
                },
                {
                  id: 212,
                  name: 'two2112',
                  isRequired: true,
                  role: '2',
                },
              ],
            },
            {
              id: 22,
              name: 'two2',
              children: [],
            },
          ],
        },
      ],
      form: {
        obj: {},
      },
      formKey: 0,
      prop_list: [],
      tableData: [],
    }
  },
  computed: {
    rules() {
      let result = {}
      this.getTreeRules(this.treeData, 'obj', result)
      return result
    },
  },
  mounted() {
    this.setTreeData(this.treeData, this.form.obj)
    this.prop_list = []
  },
  methods: {
    // 树状结构修改
    setTreeData(data, obj) {
      data.forEach((item) => {
        item.collapse = true
        obj[item.name] = null
        if (item.children?.length > 0) {
          obj[item.name] = {}
          this.setTreeData(item.children, obj[item.name])
        }
      })
      this.formKey = 1
      this.$forceUpdate()
    },
    // 添加树形结构表单验证
    getTreeRules(data, prop, result) {
      let custom_prop = prop
      data.forEach((item) => {
        custom_prop = prop + '.' + item.name
        if (item.children?.length > 0) {
          this.getTreeRules(item.children, custom_prop, result)
        } else if (item.role == 2 && item.isRequired) {
          result[custom_prop] = [
            {
              required: true,
              message: '请输入',
              trigger: 'blur',
            },
          ]
          this.prop_list.push({
            ...item,
            custom_prop,
          })
        }
      })
    },
    // 树形结构添加层数
    getTreeData(treeData, level) {
      for (const item of treeData) {
        item.level = level
        if (item.children?.length) {
          this.getTreeData(item.children, level + 1)
        }
      }
    },
    save() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        console.log('this.form', this.form)
        this.tableData.push(JSON.parse(JSON.stringify(this.form)))
      })
    },
    checkChange(val) { 
      console.log('val', val)
      this.$refs.treeRef.getCheckedKeys()
      console.log('this.$refs.treeRef.getCheckedKeys()',this.$refs.treeRef.getCheckedKeys())
    }
  },
}
</script>
